import React, {memo} from 'react'
import {mdiClose} from '@mdi/js'
import {ThemeColor} from '../color/ThemeColor'
import ButtonIcon from '../icon/ButtonIcon'
import {COLORS} from '../color'

interface TagProps {
  size?: 'xs' | 's' | 'm' | 'l'
  color?: ThemeColor | 'gray-300'
  tagText: string | number | React.ReactElement
  onClose?: () => void
  onClickTag?: () => void
  className?: string
}

const Tag: React.FC<TagProps> = memo(
  ({size, className, color, tagText, onClose, onClickTag}): React.ReactElement => {
    return (
      <div
        className={
          'tag ' +
          (color ? color : 'gray-300') +
          ' ' +
          (size ? size : 's') +
          ' ' +
          (onClickTag ? 'is-click-tag' : '') +
          ' ' +
          (className ? className : '')
        }
        onClick={onClickTag ? onClickTag : undefined}>
        <span>{tagText}</span>
        {onClose && (
          <ButtonIcon
            className={'ml-x1'}
            iconPath={mdiClose}
            color={color === 'gray-300' || color === 'warning' ? COLORS.gray600 : COLORS.white}
            title={'Закрыть'}
            onClick={onClose}
          />
        )}
      </div>
    )
  },
)

export {Tag}
